<%@page import="org.springframework.security.core.context.SecurityContextImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/jstl/fn" prefix="fn" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

    SecurityContextImpl securityContextImpl = (SecurityContextImpl) request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
    <link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/idangerous.swiper.css">

    <title>商品详情</title>
    <link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
    <link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="<%=basePath%>/assets/js/jquery-1.8.3.min.js"></script>
    <script src="<%=basePath%>assets/js/fontSize.js"></script>
    <link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
    <script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
    <style>

        .shangpinxinxi {
            background: #fff
        }

        .shangpinjieshao {
            font-size: 0.22rem;
            line-height: 0.3rem;
            padding: 0.2rem;
            background: #fff;
            border-bottom: 8px solid #f1f1f1;
        }

        .shangpinjiage {
            border-bottom: 1px solid #f1f1f1;
            background: #fff;
            line-height: 1rem;
            margin: 0 0.2rem;
        }

        .shangpinjiage > p {
            font-size: 0.28rem;
            float: left;
        }

        .goodsPrice {
            color: #FC0000;
            float: right;
            font-size: 0.3rem;
        }

        .shangpinjiage > div > .goodsPrice i {
            font-size: 0.35rem;
            line-height: 0.6rem;
            padding: 0 0.3rem 0 0
        }

        .goodsSales {
            font-size: 0.2rem;
            line-height: 0.6rem;
            padding: 0 0.3rem
        }

        .shangpinjieshao h3, .pinglun h3 {
            font-size: 0.28rem;
            font-weight: bold;
            height: 0.5rem;
            line-height: 0.5rem;
        }

        .pinglun h3 {
            padding: 0.2rem;
            background: #fff;
        }

        .shangpinjieshao p {
            font-size: 0.26rem;
            line-height: 0.4rem;
        }
        body {
            padding-bottom: 0.8rem;
            padding-top: 0.8rem;
        }

        .navPOS {
            height: 0.8rem;
        }

        .navPOS span {
            width: 20%;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.2rem
        }

        .navPOS span img {
            width: 24%;
            float: left;
            margin:0.22rem;
        }
        #toShopping{
            width:40%;
        }

        .xiangyao {
            width: 25%;
            height: 0.8rem;
            text-align: center;
            line-height: 0.8rem;
            color: #fff;
            font-size: 0.24rem;
        }

        .xiangyao.jiarugouwuche {
            background: #333
        }

        .xiangyao.goumai {
            background: red
        }

        .gouwuche_icon {
            position: relative
        }

        .gwcNumber {
            background: #fff;
            width: 0.22rem;
            height: 0.22rem;
            position: absolute;
            right: 36%;
            top: 0.15rem;
            border-radius: 50%;
            color: #FF3F25;
            line-height: 0.3rem;
            font-size: 0.1rem;
            text-align: center;
            border: 0.01rem solid #FF3F25;
        }

        .body_bj {
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            z-index: 10;
        }

        .guanbi {
            position: absolute;
            right: 0.2rem;
            top: 0.2rem;
            line-height: 0.2rem;
            font-size: 0.4rem;
        }

        .gouwuche_box {
            width: 100%;
            position: fixed;
            left: 0;
            bottom: -1.5rem;
            background: #fff;
            min-height: 3.5rem;
            padding-bottom: 1.5rem;
            z-index: 11;
        }

        .shangpinxiangqing {
            width: 100%;
            border-bottom: 1px solid #f1f1f1;
            padding-bottom: 0.1rem
        }

        .shangpinxiangqing img {
            width: 30%;
            display: block;
            border: 5px solid #fff;
            margin: -5% 0 0 2%;
        }

        .shangpinxiangqing_text {
            width: 50%;
            padding-left: 0.2rem;
            padding-top: 0.1rem;
        }

        .shangpinxiangqing_text > p {
            font-size: 0.2rem;
            line-height: 0.36rem;
        }

        .shangpinxiangqing_text > p.jiage {
            color: red;
            line-height: 0.4rem;
            font-weight: bold;
            font-size: 0.26rem;
        }

        .shangpinfenlei {
            width: 96%;
            padding: 0 2%;
            padding-bottom: 0.1rem
        }

        .shangpinfenlei p {
            font-size: 0.3rem;
            line-height: 0.5rem;
            text-indent: 0.1rem
        }

        .shangpinfenlei ul li {
            float: left;
            margin: 0.1rem
        }

        .shangpinfenlei ul li a {
            padding: 0 0.2rem;
            height: 0.42rem;
            line-height: 0.42rem;
            background: #e1e1e1;
            border-radius: 3px;
            display: block;
        }

        .shangpinfenlei ul li a.active {
            padding: 0 0.2rem;
            height: 0.42rem;
            line-height: 0.42rem;
            border-radius: 3px;
            display: block;
            color: #ccc;
            background: #FF3F25;
        }

        .queding_but {
            width: 100%;
            background: red;
            color: #fff;
            font-size: 0.3rem;
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            display: block;
            /*         border-radius: 5px; */
            position: absolute;
            left: 0;
            bottom: 0
        }

        .goumaishuliang {
            border-bottom: 1px solid #f1f1f1;
            position: absolute;
            left: 0;
            bottom: 1rem;
            width: 100%;
            border-top: 1px solid #f1f1f1;
        }

        .goumaishuliang p {
            width: 40%;
            float: left;
            padding-left: 10%;
            height: 0.6rem;
            line-height: 0.6rem;
            font-size: 0.24rem
        }

        .goumaishuliang p a {
            width: 20%;
            height: 0.6rem;
            line-height: 0.6rem;
            display: block;
            float: left;
            text-align: center;
            border-left: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
            text-indent: 0;
        }

        .goumaishuliang p input {
            width: 40%;
            height: 0.6rem;
            line-height: 0.6rem;
            display: block;
            float: left;
            text-align: center
        }
         .swiper-container {
             height: 3rem;
             width: 100%;
         }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            display: block
        }

        .device {
            width: 100%;
            height: 3rem;
            position: relative;
        }

        .swiper-container {
            height: 3rem;
            width: 100%;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            display: block
        }

        .pagination {
            position: absolute;
            left: 0;
            text-align: center;
            bottom: 0;
            width: 100%;
            z-index: 1000;
        }

        .pinglun ul li {
            width: 98%;
            padding: 0 1%;
            background: #fff;
            padding-bottom: 0.1rem;
            border-bottom: 0.01rem solid #f1f1f1
        }

        .pinglun ul li > .img, .pinglun ul li > .img2 {
            width: 0.6rem;
            height: 0.6rem;
            overflow: hidden;
            border-radius: 10%;
            margin: 0.1rem;
        }

        .pinglun ul li > .img img, .pinglun ul li > .img2 img {
            width: 100%;
            display: block;
        }

        .pinglun ul li > .pltext {
            width: 81%;
        }

        .pinglun ul li > .pltext .plrenxx {
            font-size: 0.24rem;
            line-height: 0.4rem;
            padding-top: 0.06rem
        }

        .pinglun ul li > .pltext .plxx {
            font-size: 0.22rem;
            line-height: 0.3rem;
            padding: 0.1rem 0;
        }

        .pinglun ul li > .pltext .plrenxx > span {
            font-size: 0.2rem;
            color: #aaaaaa;
            float: right
        }

        .pinglun ul li > .pltext .plxxziliao > a {
            color: #007aff;
            font-size: 0.16rem;
            line-height: 0.3rem;
            padding: 0 0.1rem
        }

        .datulunbo {
            margin: 0.2rem;
        }
        .no_comment{
            text-align: center;
            line-height: 1rem;
            color: #999;
            font-size: 0.28rem;
        }
        .no_comment img{
            vertical-align: middle;
            width: 1rem;
        }
    </style>

</head>
<body>
<script>
    $(function () {
    	if ("<%=securityContextImpl%>" == "null") {
	    	$("#shopCardCount").hide();
    	}
    	
        getIfShouCang();
        getShopCardCount();
        var goodsStockNum = '${goods.goodsStock}';
        $('.gouwuche_box').css('bottom', -$('.gouwuche_box').height() - 150);

        $('#jiarugouwuche_btn').click(function () {
            $('.body_bj').fadeIn();
            $(".gouwuche_box").animate({bottom: 0}, 100);
            //商品有规格的情况下加入购物车
            $('#queding_but').off('click');
            $('#queding_but').on('click', addShopCard);
        });

        //商品没有规格的情况下加入购物车
        $('#jiarugouwuche_btn2').click(function () {
            var joinShopCardCount = 1;
            var goodsId = '${goods.goodsId}';
            $.ajax({
                url: "<%=basePath%>app/getShopCardGoodsCount",
                timeout: 300000,
                type: 'post',
                data: {"goodsId": goodsId},
                dataType: 'json',
                success: function (data) {
                    var goodsNumtotal = 0;
                    if (data.shoppingCardGoods != null && data.shoppingCardGoods != '' && typeof(data.shoppingCardGoods) != "undefined") {
                        goodsNumtotal = data.shoppingCardGoods + parseInt(joinShopCardCount);
                    } else {
                        goodsNumtotal = 1;
                    }
                    var goodsStockNum = '${goods.goodsStock}';
                    if (goodsNumtotal > goodsStockNum) {
                        layer.open({
                            content: '添加购物车数量，已超库存了亲～'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    } else if (goodsNumtotal == 0 || goodsNumtotal <= goodsStockNum) {
                        var goodsprice = '${goods.goodsPrice}';
                        var goodstotal = ((joinShopCardCount * goodsprice).toFixed(2));
                        $.ajax({
                            url: "<%=basePath%>app/updAndAddShoppingCard",
                            timeout: 300000,
                            type: 'post',
                            data: {
                                "goodsId": goodsId,
                                "orderCount": joinShopCardCount,
                                "orderPrice": goodstotal,
                                "unitPrice": goodsprice
                            },
                            dataType: 'json',
                            success: function (data) {
                                if (data == 1) {
                                	$("#shopCardCount").css("display","block");
                                    layer.open({
                                        content: '添加成功，请在购物车等亲～'
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                    });
                                    var shopCardCount = parseInt($("#shopCardCount").html());
                                    var totalCount = (parseInt(shopCardCount) + parseInt(joinShopCardCount));
                                    if (totalCount > 99) {
                                        $("#shopCardCount").html("99+");
                                    } else {
                                        $("#shopCardCount").html(totalCount);
                                    }
                                } else if (data == 2) {
                                	$("#shopCardCount").css("display","block");
                                    layer.open({
                                        content: '添加成功，请在购物车等亲～'
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                    });
                                    var shopCardCount = parseInt($("#shopCardCount").html());
                                    var totalCount = (parseInt(shopCardCount) + parseInt(joinShopCardCount));
                                    if (totalCount > 99) {
                                        $("#shopCardCount").html("99+");
                                    } else {
                                        $("#shopCardCount").html(totalCount);
                                    }
                                } else {
                                    layer.open({
                                        content: '加入购物车失败,您先登录~'
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                    });
                                }
                            }, error: function () {
                            }
                        });
                    }
                }, error: function () {
                }
            });
        });

        $('.guanbi').click(function () {
            $('.body_bj').fadeOut();
            $(".gouwuche_box").animate({bottom: -$('.gouwuche_box').height() - 150}, 100);
        })
        $('.gljian').click(function () {
            if ($('.glinput').val() == 1) {
                $('.glinput').val(1)
            } else {
                $('.glinput').val($('.glinput').val() - 1);
            }
        })
        $('.gljia').click(function () {
            var maxShuliang = $('.kucun>span').html();
            if ($('.glinput').val() == parseInt(maxShuliang)) {
                $('.glinput').val(maxShuliang);
                layer.open({
                    content: '宝贝最多就这些了呢亲～'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            } else if ($('.glinput').val() > parseInt(maxShuliang)) {
                layer.open({
                    content: '宝贝最多就这些了呢亲～'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            } else {
                $('.glinput').val(parseInt($('.glinput').val()) + 1);
            }

        })

        $('#shoucang').click(function () {

            if ("<%=securityContextImpl%>" == "null") {
                window.location.href = "<%=basePath%>app/appLogin2";
                return;
            }

            if ($("#shoucang").find('i').html() == "收藏") {
                $(this).find('img').attr('src', '<%=basePath%>assets/images/sc2.png');
                $(this).find('i').html('已收藏');
                joinSCAndCancelSC();
            } else {
                $(this).find('img').attr('src', '<%=basePath%>assets/images/sc.png');
                $(this).find('i').html('收藏');
                joinSCAndCancelSC();
            }
        })

        function addShopCard() {
            var joinShopCardCount = $("#joinShopCardCount").val();
            var goodsId = '${goods.goodsId}';
            var strTj = "";
            //判断商品规格（如果不选择就不给他加购物车）
            $('.shangpinfenlei> .clearFirx > li .active').each(function () {
                strTj = $(this).html();
            })
            if (strTj != null && strTj != '') {
                $.ajax({
                    url: "<%=basePath%>app/getShopCardGoodsCount",
                    timeout: 300000,
                    type: 'post',
                    data: {"goodsId": goodsId},
                    dataType: 'json',
                    success: function (data) {
                        var goodsNumtotal = 0;
                        if (data.shoppingCardGoods != null && data.shoppingCardGoods != '' && typeof(data.shoppingCardGoods) != "undefined") {
                            var goodsNumtotal = data.shoppingCardGoods + parseInt(joinShopCardCount);
                        } else {
                            goodsNumtotal = 1;
                        }
                        if (goodsNumtotal > goodsStockNum) {
                            layer.open({
                                content: '库存不足'
                                , skin: 'msg'
                                , time: 2 //2秒后自动关闭
                            });
                        } else {
                            var goodsprice = '${goods.goodsPrice}';
                            var goodstotal = ((joinShopCardCount * goodsprice).toFixed(2));
                            $.ajax({
                                url: "<%=basePath%>app/updAndAddShoppingCard",
                                timeout: 300000,
                                type: 'post',
                                data: {
                                    "goodsId": goodsId,
                                    "orderCount": joinShopCardCount,
                                    "orderPrice": goodstotal,
                                    "unitPrice": goodsprice,
                                    "goodsSize": strTj
                                },
                                dataType: 'json',
                                success: function (data) {
                                    if (data == 1) {
                                        layer.open({
                                            content: '添加成功'
                                            , skin: 'msg'
                                            , time: 2 //2秒后自动关闭
                                        });
                                        var shopCardCount = parseInt($("#shopCardCount").html());
                                        var totalCount = (parseInt(shopCardCount) + parseInt(joinShopCardCount));
                                        if (totalCount > 99) {
                                            $("#shopCardCount").html("99+");
                                        } else {
                                            $("#shopCardCount").html(totalCount);
                                        }
                                    } else if (data == 2) {
                                        layer.open({
                                            content: '添加成功'
                                            , skin: 'msg'
                                            , time: 2 //2秒后自动关闭
                                        });
                                        var shopCardCount = parseInt($("#shopCardCount").html());
                                        var totalCount = (parseInt(shopCardCount) + parseInt(joinShopCardCount));
                                        if (totalCount > 99) {
                                            $("#shopCardCount").html("99+");
                                        } else {
                                            $("#shopCardCount").html(totalCount);
                                        }
                                    } else {
                                        layer.open({
                                            content: '加入购物车失败,您先登录~'
                                            , skin: 'msg'
                                            , time: 2 //2秒后自动关闭
                                        });
                                    }
                                }, error: function () {
                                }
                            });
                            $('.body_bj').fadeOut();
                            $(".gouwuche_box").animate({bottom: -$('.gouwuche_box').height() - 150}, 100);
                        }
                    }, error: function () {
                        layer.open({
                            content: '服务器出现了点异常,请稍后再尝试~'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    }
                });
            } else {
                layer.open({
                    content: '请选择商品规格~'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            }
        }

        //判断是否有被收藏
        function getIfShouCang() {
            var isLogin = 0;
            $.ajax({
                url: "<%=basePath%>app/getFavorites",
                type: 'post',
                data: {"targetId": "${goods.goodsId}", "attentionType": 0},
                dataType: 'json',
                async: false,
                success: function (data) {
                    if (typeof(data.state) == "undefined") {
                        isLogin = 0;
                    } else {
                        isLogin = 1;
                        var obj = data.favoritesGoodsList;
                        if (obj.length > 0) {
                            $("#shoucang").find('img').attr('src', '<%=basePath%>assets/images/sc2.png');
                            $("#shoucang").find('i').html('已收藏');
                        } else {
                            $("#shoucang").find('img').attr('src', '<%=basePath%>assets/images/sc.png');
                            $("#shoucang").find('i').html('收藏');
                        }
                    }
                }, error: function () {
                }
            });

        };

        //加入收藏与取消收藏
        function joinSCAndCancelSC() {
            var targetId = '${goods.goodsId}';
            var favoritesId = '${favoritesInfo.favoritesId}';
            var favoriteType = 0;
            $.ajax({
                url: "<%=basePath%>app/focusAndCancelFocus",
                timeout: 300000,
                type: 'post',
                data: {"targetId": targetId, "favoritesId": favoritesId, "favoriteType": favoriteType},
                dataType: 'json',
                success: function (data) {
                    if (data == 1) {
                        layer.open({
                            content: '取消收藏宝贝成功'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    } else if (data == 2) {
                        layer.open({
                            content: '收藏了一个宝贝'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    } else {

                    }
                }, error: function () {
                }
            });
        };

        //获取购物车数量
        function getShopCardCount() {
            $.ajax({
                url: "<%=basePath%>app/getShopCardCount",
                timeout: 300000,
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data > 99) {
                        $("#shopCardCount").html("99+");
                    } else if (data == 0) {
                        $("#shopCardCount").css("display","none");
                    } else {
                        $("#shopCardCount").html(data);
                    }
                }, error: function () {
                }
            });
        };

        //立即购买
        $('#nowShopping').click(function () {
            $('.body_bj').fadeIn();
            $(".gouwuche_box").animate({bottom: 0}, 100);
            //商品有规格的情况下加入购物车
            $('#queding_but').off('click');
            $('#queding_but').on('click', buyNow);
        });

        function buyNow() {
            //判断是否存在商品规格，是则必须选择，否则立即购买
            var strTj = "";
            if ("${not empty goods.goodsSize}" == true) {

                $('.shangpinfenlei> .clearFirx > li .active').each(function () {
                    strTj = $(this).html();
                })
                if (strTj == "" || strTj == null) {
                    layer.open({
                        content: '请选择商品规格~',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    return false;
                }
            }
            if(parseInt($("#joinShopCardCount").val()) > goodsStockNum) {
                layer.open({
                    content: '库存不足',
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
                return;
            }
            var goodsId = '${goods.goodsId}';
            var shopcarnum = $("#joinShopCardCount").val();
            window.location.href = "<%=basePath%>app/toNowShopping?goodsId=" + goodsId + "&shopcarnum=" + shopcarnum + "&goodsSize=" + strTj;
        }

        //跳转购物车
        $('#toShopping,#shopCardCount').click(function () {
            window.location.href = "<%=basePath%>app/getShoppingCardList";
        });


        $('.shangpinfenlei ul').find('li').each(function () {

            $(this).click(function () {
                if ($(this).find('a').hasClass('active')) {


                    $(this).find('a').removeClass('active')

                } else {


                    $(this).siblings().find('a').removeClass('active');
                    $(this).find('a').addClass('active')

                }
            })
        })


    });
</script>
<div class="navPOS clearFirx">
    <c:if test="${goods.goodsSize != null && goods.goodsSize !=''}">
        <a href="javascript:;" class="float_r xiangyao goumai" id="nowShopping">立即购买</a>
        <a href="javascript:;" class="float_r xiangyao jiarugouwuche" id="jiarugouwuche_btn">加入购物车</a>
    </c:if>
    <c:if test="${goods.goodsSize == null || goods.goodsSize ==''}">
        <a href="javascript:;" class="float_r xiangyao goumai" id="nowShopping">立即购买</a>
        <a href="javascript:;" class="float_r xiangyao jiarugouwuche" id="jiarugouwuche_btn2">加入购物车</a>
    </c:if>
    <span href="javascript:;" class="float_l shoucang" id="shoucang">
		<img src="<%=basePath%>assets/images/sc.png" alt="">
		<i style="margin-left: -0.2rem;">收藏</i>
	</span>
    <span href="javascript:;" class="float_r gouwuche_icon">
		<img src="<%=basePath%>assets/images/gwc.png" alt="" id="toShopping"/>
		<div class="gwcNumber" id="shopCardCount">0</div>
	</span>
</div>
<div class="body_bj"></div>
<div class="gouwuche_box">
    <div class="guanbi">
        <i class="fa fa-close"></i>
    </div>
    <div class="shangpinxiangqing clearFirx">
        <img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${goods.goodsThums}" alt="" class="float_l" style="width: 2.1rem;height: 2.1rem;">
        <div class="float_l shangpinxiangqing_text">
            <p class="jiage">
            	￥ <span>${goods.goodsPrice}</span>元
            </p>
            <p class="kucun">
               	 库存<span>${goods.goodsStock}</span>件
            </p>
        </div>
    </div>
    <c:if test="${goods.goodsSize!=null&&goods.goodsSize!='' }">
        <div class="shangpinfenlei">
            <p>规格</p>
            <ul class="clearFirx">
                <c:set value="${ fn:split(goods.goodsSize, ',') }" var="goodsSizeList"/>
                <c:forEach items="${goodsSizeList}" var="size" varStatus="status">
                    <li>
                        <a href="javascript:;">${size}</a>
                    </li>
                </c:forEach>

            </ul>
        </div>
    </c:if>
    <div class="goumaishuliang clearFirx">
        <p>购买数量</p>
        <p>
            <a href="javascript:;" class="gljian">-</a>
            <input type="text" value="1" class="glinput" id="joinShopCardCount" readonly="readonly">
            <a href="javascript:;" class="gljia">+</a>
        </p>
    </div>
    <a href="javascript:;" class="queding_but" id="queding_but">确定</a>
</div>

<!-- 头部开始  -->
<div class="header">
    <div class='header_top'>
        <a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
        <div class="header_top">商品详情</div>
    </div>
</div>

<div class="datulunbo">
    <div class="swiper">
        <div class="device">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <c:set value="${ fn:split(goods.goodsImage, ',') }" var="imgList"/>
                    <c:forEach items="${imgList}" var="img" varStatus="status">
                        <div class="swiper-slide">
                            <img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${img}">
                        </div>
                    </c:forEach>
                </div>
            </div>
            <div class="pagination"></div>
        </div>
        <script src="<%=basePath%>assets/js/idangerous.swiper.min.js"></script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                pagination: '.pagination',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            })
        </script>
    </div>
</div>
<!-- 轮播图部分结束 -->


<div>
    <div class="shangpinjiage clearFirx">
        <p>${goods.goodsName}</p>
        <span class="float_r goodsPrice">￥<i>${goods.goodsPrice}</i></span>
    </div>
    <div class="shangpinxinxi">
        <div class="shangpinjieshao clearFirx">
            <h3>商品描述</h3>
            <p>${goods.goodsIntro}</p>
            <span class="float_r goodsSales">销量 <c:if
                    test="${goods.goodsSales != null}">${goods.goodsSales}件</c:if> <c:if
                    test="${goods.goodsSales == null}">0件</c:if>
            </span>
        </div>
    </div>
    <div class="pinglun">
        <h3>商品评论</h3>
        <ul>
        	<c:choose>
        		<c:when test="${not empty aboutGoodsOfAppraises}">
	        		<c:forEach var="aboutGoodsOfAppraises" items="${aboutGoodsOfAppraises}">
		                <li class="clearFirx">
		                    <div class="float_l img">
		                        <c:if test="${not empty aboutGoodsOfAppraises.userPhoto}">
		                            <img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${aboutGoodsOfAppraises.userPhoto}" class="float_l">
		                        </c:if>
		                        <c:if test="${empty aboutGoodsOfAppraises.userPhoto}">
		                            <img src="<%=basePath%>/assets/css/aboutUs/logo.png" alt="" class="float_l">
		                        </c:if>
		                    </div>
		                    <div class="pltext float_l">
		                        <p class="plrenxx">${aboutGoodsOfAppraises.userName}
		                            <span class="float_r">${fn:substring(aboutGoodsOfAppraises.createDate, 0, 10)}</span>
		                        </p>
		                        <p class="plxx">${aboutGoodsOfAppraises.content}</p>
		                        <p class="plxxziliao clearFirx">
		                        </p>
		                    </div>
		                </li>
		            </c:forEach>
        		</c:when>
            	<c:otherwise>
        			<div class="no_comment">
			            <img src="<%=basePath%>assets/images/no_comment.png" alt="">该商品暂无评论
			        </div>
        		</c:otherwise>
        	</c:choose>
        </ul>
    </div>
</div>
</body>
</html>